import $ from "jquery";
import Bar from "./Bar";
import Q from "../../lib/qunee-es";


///drag and drop
const DRAGINFO_PREFIX = "draginfo";

const tpl = `
<div class="accordion group" id="protoPanel"></div>
`;

// 左侧原型栏
class ProtoBar extends Bar {
	constructor(options) {
		super(options);
		this.init();
	}
	init() {
		this.$bar = $(tpl);

		this.$list = $(".group-items", this.$bar);
		this.$parent.append(this.$bar);

	}
	//展示原型属性
	show(ele) {
		//show element props
	}
	

	initProtos(protoGroups){

		let html = ''

		for (var i in protoGroups){
			html += this.createGroups(protoGroups[i], i)
		}

		let $panel = $('#protoPanel')
		$panel.html(html)

		for (var i in protoGroups){
			// let name = groups[i].name
			// let list = groups[i].list
			var group = protoGroups[i]
			let protos = group.Protos
			let $list = $panel.find(`#protogroup-${group.Id}-tab .card-body`)

			if(!protos) {
				continue
			}

			protos.forEach(proto => {
				this.createDNDImage(proto.Icon , proto.Name, proto, $list)
			})
		}
	}
	
	createGroups(group, index) {

		let isShow = index == 0 ? 'show': ''
		let html = 
		`<div class="card z-depth-0">
			<div class="card-header">
				<a data-toggle="collapse" data-parent="#protoPanel" href="#protogroup-${group.Id}-tab">
					${group.Name}
					<i class="fas fa-angle-down rotate-icon"></i>
				</a>
			</div>
			<div id="protogroup-${group.Id}-tab" class="collapse ${isShow}" 
				data-parent="#protoPanel">
				<div class="card-body"></div>
			</div>
		</div>
		`

		return html
	}

	createDNDImage(src, title, info, $list) {
		var tpl = 
			`<div class="group-item" >
				<div class="icon">
					<img src="${src}" title="${title}">
				</div>
				<div class="small">${title}</div>
			</div>`
		
		var $item = $(tpl)
		
		let me = this;
		// let img = document.createElement("img");
		// img.style.width = "100%";
		// img.src = src;
		// img.setAttribute("title", title);
		// info = info || {};
		// if (!info.image && (!info.type || info.type == "Node")) {
			// 	info.image = src;
			// }
			// info.label = info.label || title;
			// info.title = title;
		// var $wrap = $('<div class="group-item card" style="width:50px;"></div>')
		$list.append($item);
		var $img = $item.find("img")
		if(2 != info.Type) { //Type==2 是边
			$img.attr("draggable", "true");
			$img.attr(DRAGINFO_PREFIX, JSON.stringify(info));
			// $img.on("dragstart", me.ondrag)
			$img.get(0).ondragstart = me.ondrag
		}else { //边可以选择
			$item.attr("protoId" , info.Id)
			$item.addClass("powergraph-edge")
			$item.click(function(evt) {
				me.onEdgeProtoClick(evt,this)
			})
		}

		// let $wrapper = wrap.append(img);
		
	}

	ondrag(evt) {
		evt = evt || window.event;
		var dataTransfer = evt.dataTransfer;
		var target = evt.target;
		dataTransfer.setData("text", target.getAttribute(DRAGINFO_PREFIX));
	}

	onEdgeProtoClick(evt,src) {
		var $src = $(src)
		this.$bar.find(".powergraph-edge").css('border',"")
		$src.css('border',"1px red solid")
		this.currentProtoId = $src.attr("protoId")
		console.log($src.attr("protoId"))
		this.editor.graph.interactionMode = Q.Consts.INTERACTION_MODE_CREATE_SIMPLE_EDGE
	}
}

export default ProtoBar;
